<template>
    <div>
        <!--增加或更新的表单弹窗-->
        <div style="text-align: left; margin: 10px">
            <!--查询-->
            <el-input type="text"
                      style="width: 200px; "
                      placeholder="查询参数"
                      size="mini"
                      v-model="searchParams.searchParam1" clearable>
            </el-input>
            <el-button size="mini" @click="clearSearchParams">
                清空
            </el-button>
            <el-button size="mini" type="primary">
                查询
            </el-button>
        </div>

        <!--列表-->
        <div style="margin: 0px 10px;text-align: left;">
            <el-table
                    :data="ticketOrders"
                    stripe
                    :default-sort="{prop: 'createTime', order: 'ascending'}">

                <el-table-column prop="goodsTitle" label="商品标题"></el-table-column>
                <el-table-column prop="orderCreator" label="订单创建者" ></el-table-column>
                <el-table-column prop="address" label="寝室" sortable></el-table-column>
                <el-table-column prop="orderPrice" label="订单价格" sortable>
                    <template slot-scope="scope">
                        ￥{{scope.row.orderPrice / 10}}
                    </template>
                </el-table-column>
                <el-table-column prop="ticketPrice" label="水票价格" sortable>
                    <template slot-scope="scope">
                        ￥{{scope.row.ticketPrice / 10}}
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" sortable>
                    <template slot-scope="scope">
                        {{scope.row.orderStatus === 1 ? "已完成"
                            : scope.row.orderStatus === 2 ? "未付款" : "已取消"}}
                    </template>
                </el-table-column>
                <el-table-column prop="payType" label="支付类型"></el-table-column>
                <el-table-column prop="orderHandler" label="订单处理者"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" sortable show-overflow-tooltip></el-table-column>
                <el-table-column prop="finishTime" label="完成时间" sortable show-overflow-tooltip></el-table-column>
            </el-table>
            <!--分页组件-->
            <el-row style="float: right">
                <el-pagination
                        @current-change="changePageNo"
                        @size-change="changePageSize"
                        :current-page.sync="searchParams.pageNo"
                        :page-sizes="[5, 10, 20, 30, 50, 100]"
                        :page-size.sync="searchParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>

        </div>
    </div>
</template>

<script>
    import {
        getTicketOrders
    } from "@/api/modules/app/ticketOrderApi.js";

    export default {
        name: "ticketOrderComponent",
        data() {
            return {
                // 查询参数
                searchParams: {
                    searchParam1: null,
                    pageNo: 1,
                    pageSize: 10,
                },
                ticketOrders: [],
                total: 0
            }
        },
        mounted() {
            this.getTicketOrders()
        },
        methods: {
            // 获取数据
            getTicketOrders() {
                let that = this;
                getTicketOrders(this.searchParams.pageNo, this.searchParams.pageSize).then(result => {
                    that.ticketOrders = result.data.records;
                    that.total = result.data.total;
                })
            },
            // 切换页数
            changePageNo(pageNo) {
                this.searchParams.pageNo = pageNo;
                this.getTicketOrders();
            },
            // 改变页面大小
            changePageSize(pageSize) {
                this.searchParams.pageSize = pageSize;
                this.getTicketOrders();
            },
            // 清除查询参数
            clearSearchParams() {
                this.searchParams.searchParam1 = null;
            }
        }
    }
</script>
